<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="p-2 source_file_management">
    <el-card shadow="hover" style="margin-bottom: 10px">
      <el-form :inline="true" size="small" label-width="80px">
        <el-form-item label="来源日期">
          <el-date-picker
            v-model="dateRangeCreateTime"
            style="width: 240px"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="元文件类型">
          <el-select v-model="queryParams.fileType" placeholder="全部">
            <el-option label=".xlsx" value=".xlsx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用场景">
          <el-select
            v-model="queryParams.businessId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="hover">
      <el-table :data="metaList" v-loading="loading">
        <el-table-column label="数据来源日期" align="center" prop="createTime" show-overflow-tooltip fixed="left" />
        <el-table-column label="元文件名称" align="center" prop="fileName" show-overflow-tooltip />
        <el-table-column label="元文件类型" align="center" prop="fileType" show-overflow-tooltip />
        <el-table-column label="应用场景" align="center" prop="businessName" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" link type="primary" icon="View" @click="view(scope.row)">数据预览</el-button>
            <el-button size="small" link type="primary" @click="handlePreview('relationship', scope.row)">映射关系</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="pagenation">
      <el-pagination
        v-show="total > 0"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-dialog v-model="viewDialog.visible" custom-class="full-screen" :fullscreen="false" :title="viewDialog.title" width="80%" append-to-body>
    <ViewOffice v-if="viewDialog.visible" :src-url="viewInfo.url" :type="viewInfo.type" />
  </el-dialog>
  <Relationship v-if="relationshipVisible" :visible="relationshipVisible" :map-fields="selectedMapFields" @handle-event="handleEvent" />
</template>

<script setup lang="ts">
import { getmetadataTableList, getBusinessList } from '@/api/metaData';
import Relationship from './component/relationship.vue';
import ViewOffice from '@/components/ViewOffice';
const viewVisible = ref(false);
const relationshipVisible = ref(false);
const selectedMapFields = ref('');
const viewInfo = reactive({
  url: '',
  type: ''
});
const total = ref(0);
const loading = ref(false);
const metaList = ref([]);
const businessList = ref([]);
const businessListInit = ref([]);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// 控制弹窗关闭
const handlePreview = (type, row) => {
  selectedMapFields.value = row.mapFields;
  if (type === 'relationship') {
    relationshipVisible.value = true;
  }
};
const handleEvent = (data) => {
  if (data.type === 'close') {
    viewVisible.value = false;
    relationshipVisible.value = false;
  }
};

// 分页功能实现
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  isAsc: 'descending',
  orderByColumn: 'CreateTime',
  fileType: '',
  businessId: ''
});

// 跳转到指定页面
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  getList();
};

// 查询功能实现
const doQuery = () => {
  getList();
};

// 重置功能实现
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    fileType: '',
    businessId: '',
    isAsc: 'descending',
    orderByColumn: 'CreateTime'
  };
  dateRangeCreateTime.value = ['', ''];
  getList();
};

// 预览功能实现
const viewDialog = reactive({
  visible: false,
  title: '数据预览'
});

const view = (row) => {
  const { fileUrl, fileType } = row;
  viewInfo.url = fileUrl;
  viewInfo.type = fileType;
  nextTick(() => {
    viewDialog.visible = true;
  });
};

// 获取应用场景列表数据
const getBusinessListData = (query) => {
  getBusinessList({
    'pageNum': 1,
    'pageSize': 20,
    'name': query
  }).then((res) => {
    loading.value = false;
    if (!query) {
      businessList.value = res.rows;
      businessListInit.value = res.rows;
    } else {
      businessList.value = res.rows;
    }
  });
};

const remoteMethod = (query) => {
  if (query !== '') {
    loading.value = true;
    getBusinessListData(query);
  } else {
    businessList.value = businessListInit.value;
  }
};
// 获取列表数据
const getList = () => {
  loading.value = true;
  getmetadataTableList(proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime'))
    .then((res) => {
      if (res) {
        metaList.value = res?.rows || [];
        loading.value = false;
        total.value = res?.total || 0;
      }
    })
    .catch(() => {
      metaList.value = [];
    });
};
onMounted(() => {
  getBusinessListData('');
  getList();
});
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 100vh !important;
}

.source_file_management {
  height: calc(100vh - 84px);
  overflow: auto;
}

.pagenation {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>
